<template>
  <!-- 智能抄表 -->
  <div style="display: flex">
    <!-- <el-card class="left-card" v-loading="loading">
      <template #header>
        <div style="">
          <el-button @click="changeProject"> 切换项目</el-button>
        </div>
      </template>
      <div style="display: flex; flex-direction: column">
        <span style="color: #848484">厂区设备</span> -->
    <!--树结构-->
    <!--   <el-tree
          ref="treeRef"
          class="filter-tree"
          :data="data1"
          :props="defaultProps"
          @node-click="handleNodeClick"
        /> -->
    <!-- 分隔线 -->
    <!-- </div> -->
    <!-- 散列设备 -->
    <!-- <div style="display: flex; flex-direction: column; margin-top: 10px">
        <span style="color: #848484">散列设备</span> -->
    <!--树结构-->
    <!--  <el-tree
          ref="treeRef"
          class="filter-tree"
          :data="data1"
          :props="defaultProps"
          @node-click="handleNodeClick"
        />
      </div>
    </el-card> -->
    <!-- <el-card class="right-card" style="height: 81vh" v-loading="rightLoading">
      <template #header>
        <h3 style="margin: 0px;">123</h3>
        
        <div style="">
          <el-button @click="changeProject"> 切换项目</el-button>
        </div>
      </template>
      <vue3-tree-org
        v-if="isloadingOver"
        :data="grdata"
        center
        :horizontal="horizontal"
        :collapsable="collapsable"
        :label-style="style"
        :only-one-node="onlyOneNode"
        :clone-node-drag="cloneNodeDrag"
        :before-drag-end="beforeDragEnd"
        @on-contextmenu="onMenus"
        @on-node-click="onNodeClick"
      >
      </vue3-tree-org>
      <enterpriseDialog></enterpriseDialog>

    </el-card> -->
    <el-card style="height: 81vh; width: 100%" v-loading="rightLoading">
      <template #header>
        <div style="display: flex; justify-content: space-between">
          <h3 style="margin: 0px">{{titel}}</h3>
          <!-- <el-button @click="changeProject"> 切换项目</el-button> -->

          <el-button type="primary" @click="changeProject"> 切换项目</el-button>
        </div>
      </template>
      <vue3-tree-org
        v-if="isloadingOver"
        :data="grdata"
        center
        :horizontal="horizontal"
        :collapsable="collapsable"
        :label-style="style"
        :only-one-node="onlyOneNode"
        :clone-node-drag="cloneNodeDrag"
        :before-drag-end="beforeDragEnd"
        @on-contextmenu="onMenus"
        @on-node-click="onNodeClick"
      >
      </vue3-tree-org>
      <enterpriseDialog></enterpriseDialog>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeMount } from "vue";
import mitts from "@/utils/bus.js";
import enterpriseDialog from "../../enterprise/energySystem/selectEnterprise/index.vue";
import { treeProjDevice } from "@/api/enterpriseArchives";
import { doLableData } from "@/utils/index";

const titel = ref("");
let horizontal = ref(false);
let collapsable = ref(true);
let onlyOneNode = ref(true);
let cloneNodeDrag = ref(true);
let isloadingOver = ref(false);
let rightLoading = ref(true);
let style = reactive({
  background: "#fff",
  color: "#5e6d82",
});
const loading = ref(false);
const defaultProps = {
  children: "children",
  label: "label",
};
let data1 = [
  {
    label: "Level one 1",
    id: "12",
    children: [
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
        children: [
          {
            label: "Level three 2-1-1",
          },
        ],
      },
      {
        label: "Level two 2-2",
        children: [
          {
            label: "Level three 2-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 3",
    children: [
      {
        label: "Level two 3-1",
        children: [
          {
            label: "Level three 3-1-1",
          },
        ],
      },
      {
        label: "Level two 3-2",
        children: [
          {
            label: "Level three 3-2-1",
          },
        ],
      },
    ],
  },
];
let grdata = reactive({});
onMounted(() => {
  mitts.emit("show", true);
});
onBeforeMount(() => {
  mitts.on("projectId", (e) => {
    doDataList(e);
  });
});
const changeProject = () => {
  mitts.emit("show", true);
};
const onMenus = ({ node, command }) => {
  console.log(node, command);
};
const onNodeClick = (e, data) => {};

const handleNodeClick = (data) => {
  console.log(data);
};
const doLableData1 = (data, data2, type) => {
  //开始处理第一层
  data["label"] = data.name;
  data["children"] = data.regionVOList;
  data["id"] = data.regionId;
  data["style"] = { color: "#fff", background: "#543b07" };
  let temp1 = [];
  if (data.regionVOList.length > 0) {
    for (let i = 0; i < data.children.length; i++) {
      //开始处理第二层
      data.children[i]["label"] = data.children[i].regionName;
      data.children[i]["children"] = data.children[i].deviceTypeVO;
      data.children[i]["id"] = data.children[i].regionId;
      data.children[i]["style"] = { color: "#fff", background: "#b68f5e" };
      let temp = data.children[i].children;
      for (let t = 0; t < temp.length; t++) {
        data.children[i].children[t]["label"] = temp[t].deviceTypeName;
        data.children[i].children[t]["children"] = temp[t].deviceList;
        data.children[i].children[t]["pid"] = data.children[i].deviceTypeId;
        data.children[i].children[t]["id"] = temp[t].deviceTypeId;
        data.children[i].children[t]["style"] = {
          color: "#fff",
          background: "#8c8c8c",
        };
        let temp2 = temp[t].deviceList;
        for (let j = 0; j < temp2.length; j++) {
          data.children[i].children[t].children[j]["label"] = temp2[j].name;
          data.children[i].children[t].children[j]["pid"] =
            temp[t].deviceTypeId;
          data.children[i].children[t].children[j]["id"] = temp2[j].deviceId;
        }
      }
    }
    //开始处理散列设备
    if (data2.length > 0) {
      for (let i = 0; i < data2.length; i++) {
        data2[i]["children"] = data2[i].deviceList;
        data2[i]["label"] = data2[i].deviceTypeName;
        data2[i]["id"] = data2[i].deviceTypeId;
        data2[i]["style"] = {
          color: "#fff",
          background: "#454eb7",
        };
        for (let j = 0; j < data2[i].children.length; j++) {
          data2[i].children[j]["label"] = data2[i].children[j].name;
        }
        data.children.push(data2[i]);
      }
    }
  }
  return data;
};
const doDataList = (value) => {
  /**
   * 获取数据
   */
  isloadingOver.value = false;
  rightLoading.value = true;
  let data = {
    projId: value,
  };
  treeProjDevice(data)
    .then((res) => {
      titel.value = res.data.projectVO.name;
      grdata = doLableData1(
        res.data.projectVO,
        res.data.deviceTypeVOList,
        "all"
      );
      isloadingOver.value = true;
      rightLoading.value = false;
    })
    .catch((msg) => {
      console.log(msg);
    });
};
</script>

<style lang="less" scoped>
.left-card {
  min-width: 120px;
  max-width: 35%;
  margin-right: 10px;
}
.right-card {
  width: 90%;
}
.el-card__body {
  height: 80%;
}
</style>
